import "../../../global.css"
import { Text, View, ScrollView, Button, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
import { vars, useColorScheme, remapProps, cssInterop } from 'nativewind';
import { Tester, TestCase, TestSuite } from '@rnoh/testerino';

export function App() {

  const { colorScheme, setColorScheme } = useColorScheme();
  const theme = vars({
    "--theme-fg": "green",
  });
  type ThirdPartyButtonProps = {
    buttonStyle?: any;
    labelStyle?: any;
    children?: React.ReactNode;
    [key: string]: any;
  };
  const ThirdPartyButton = ({ buttonStyle, labelStyle, children, ...props }: ThirdPartyButtonProps) => (
    <TouchableOpacity style={buttonStyle} {...props}>
      <Text style={labelStyle}>{children}</Text>
    </TouchableOpacity>
  );
  const CustomizedButton = remapProps(ThirdPartyButton, {
    buttonClass: "buttonStyle",
    labelClass: "labelStyle",
  });
  const MyInput = (props) => <TextInput {...props} />;
  const OverridenTextInput = remapProps(MyInput, { className: "style" });

  cssInterop(TextInput, {
    className: {
      target: "style",
      nativeStyleToProp: {
        textAlign: true,
      },
    },
    placeholderClassName: {
      target: false,
      nativeStyleToProp: {
        color: "placeholderTextColor",
      },
    }
  });

  cssInterop(Tester, {
    className: {
      target: "style",
      nativeStyleToProp: {
        textAlign: true,
      },
    }
  });
  return (
    <Tester className="flex-1 bg-black pt-20">
      <ScrollView>
        <Text className="text-4xl text-white font-bold">vars</Text>
        <TestSuite name='设置CSS 变量'>
          <View className="h-10"></View>
          <View style={vars({ '--brand-color': 'red' })}>
            <Text className="text-[--brand-color]" >
              Welcome to Nativewind!
            </Text>
          </View>
          <View className="h-10"></View>
          <View className="flex-1 justify-center items-center gap-10" style={theme}>
            <Text className="text-[--theme-fg]">Variables!!!</Text>
          </View>
          <View className="h-10"></View>
        </TestSuite>

        <Text className="text-4xl text-white font-bold">useColorScheme</Text>
        <TestSuite name='hooks:useColorScheme()'>
          <TestCase tags={['C_API']} itShould='useColorScheme()'>
            <View style={{ height: 120, alignItems: 'center', justifyContent: 'center' }}>
              <View className='dark:bg-black w-60 h-8 rounded-md'>
                <Text className='dark:text-white leading-6 text-center' >{'light:白底黑字;dark:黑底白字'}</Text>
              </View>
              <View className='w-48 h-8 rounded-md'>
                <Text className='leading-6 text-center' >{colorScheme}</Text>
              </View>
              <Button
                title='点击切换主题'
                onPress={() => {
                  setColorScheme(colorScheme === 'light' ? 'dark' : 'light')
                }}
              />
            </View>
          </TestCase>
        </TestSuite>
        <Text className="text-4xl text-white font-bold">remapProps</Text>
        <TestSuite name='hooks:remapProps()'>
          <TestCase itShould='remapProps()'>
            <View className="p-10">
              <CustomizedButton buttonClass="bg-blue-500 p-2" labelClass="text-white font-bold">
                按钮
              </CustomizedButton>
            </View>
            <View className="px-10">
              <OverridenTextInput
                className="
                  h-10
                  w-full
                  p-2
                  border
                  border-gray-300
                  rounded-md
                  text-base
                  text-black
                  bg-white
                  shadow
                "
                placeholder="placeholder" keyboardType="numeric" />
            </View>
            <View className="h-10"></View>
          </TestCase>
        </TestSuite>
        <Text className="text-4xl text-white font-bold">cssInterop</Text>
        <TestSuite name='hooks:cssInterop()'>
          <TestCase itShould='cssInterop()'>
            <View className="p-10">
              <TextInput
                className="h-10 w-full p-2.5 border border-red-300 rounded-md
                  text-base
                  text-orange-700
                  bg-white
                  shadow
                "
                placeholderClassName="text-green-700"
                placeholder="placeholder"
              />
            </View>
          </TestCase>
        </TestSuite>
        <Text className="text-4xl text-white font-bold">withNativeWind</Text>
        <TestSuite name='hooks:withNativeWind()'>
          <TestCase itShould='withNativeWind()'>
            <View style={styles.button}>
              <Text style={styles.buttonText}>纯 StyleSheet 文本</Text>
            </View>
          </TestCase>
        </TestSuite>
      </ScrollView>
    </Tester>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#10B981",
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 6,
    alignItems: "center",
  },
   buttonText: {
    color: "#ffffff",
    fontWeight: "600",
    fontSize: 16,
  },
});

export const displayName = "nativewind";
export const framework = "React";
export const category = "UI";
export const title = "nativewind";
export const documentationURL = "https://github.com/react-native-oh-library/nativewind";
export const description = "The utility-first workflow you love from Tailwind CSS in your React Native applications.";

export const examples = [
    {
        title: "nativewind",
        render: function (): any {
            return <App />;
        },
    },
];